<template>
	<view class="container">
		<view class="example-body">
			<uni-steps :options="list" active-color="#8AB46C" :active='step' />
		</view>
		<view v-show="step == 0">
			<view class="common_info" style="margin-top: 100upx;">基本信息</view>
			<view class="group_item">
				<view class="group_title">
					<span style="color: red;">*</span>姓名
				</view>
				<input type="text" v-model="userInfo.inputName" placeholder="请输入姓名" class="picker_class" />
			</view>
			<view class="group_item">
				<view class="group_title">
					<span style="color: red;">*</span>性别
				</view>
				<view class="picker_class">
					<radio-group @change="handleSexChange" v-model="userInfo.inputSex">
						<label class="radio">
							<radio value="1" checked="true" style="transform: scale(0.6);" />男
						</label>
						<label class="radio">
							<radio value="0" style="transform: scale(0.6);margin-left:10upx" />女
						</label>
					</radio-group>
				</view>
			</view>
			<view class="group_item">
				<view class="group_title">
					<span style="color: red;">*</span>手机号码
				</view>
				<input type="tel" v-model="userInfo.inputPhone" placeholder="请输入手机号码" class="picker_class" />
			</view>
			<view class="group_item">
				<view class="group_title">
					<span style="color: red;">*</span>身份证号
				</view>
				<input type="idcard" v-model="userInfo.inputIdCard" placeholder="请输入身份证号" class="picker_class" />
			</view>
			<view class="group_item">
				<view class="group_title" style="width: 136upx;">
					<span style="color: red;">*</span>出生日期
				</view>
				<picker @change="bindBirthdayChange" mode="date" :value="userInfo.inputBirthday">
					<view class="picker_class">{{userInfo.inputBirthday || '请选择生日'}}</view>
				</picker>
			</view>

			<!-- <view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>曾用名
			</view>
			<input type="text" v-model="userInfo.inputOldName" placeholder="请输入姓名" class="picker_class" />

		</view> -->
			<!-- <view class="hint_text">曾用名以户口本为准，没有的填写“无”</view> -->
			<!-- 		<view class="group_item">
			<view class="group_title" style="width:136upx">
				<span style="color: red;">*</span>民族
			</view>
			<picker @change="bindNationChange" :range="nationList" :value="userInfo.inputNation">
				<view class="picker_class">{{userInfo.inputNation}}</view>
			</picker>
		</view> -->
			<view class="group_item">
				<view class="group_title" style="width: 136upx;">
					<span style="color: red;">*</span>政治面貌
				</view>
				<picker @change="bindPoliticChange" :range="politicList" :value="userInfo.inputPolitic">
					<view class="picker_class">{{userInfo.inputPolitic || '请选择政治面貌'}}</view>
				</picker>
			</view>
			<view class="group_item">
				<view class="group_title" style="width: 136upx;">
					<span style="color: red;">*</span>文化程度
				</view>
				<picker @change="bindEducationChange" :range="eduList" :value="userInfo.inputEducation">
					<view class="picker_class">{{userInfo.inputEducation || '请选择学历'}}</view>
				</picker>
			</view>
			<view class="group_item">
				<view class="group_title">
					<span style="color: red;">*</span>毕业院校
				</view>
				<input type="text" v-model="userInfo.inputSchName" placeholder="请输入学校名称" class="picker_class" />
			</view>
			<view class="group_item">
				<view class="group_title">
					所学专业
				</view>
				<input type="text" v-model="userInfo.inputMajor" placeholder="请输入专业名称" class="picker_class" />
			</view>
			<!-- 		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>宗教信仰
			</view>
			<input type="text" v-model="userInfo.inputReligion" placeholder="请输入信仰" class="picker_class" />
		</view>
		<view class="hint_text">宗教信仰没有的须填写“无”</view> -->
			<!-- 户籍所在地多项选择差一个选项 -->
			<view class="group_item">
				<view class="group_title" style="width: 170upx;">
					<span style="color: red;">*</span>户籍所在地
				</view>
				<!-- <picker mode="region" :value="userInfo.inputRegion" @change="bindRegionChange">
					<view class="picker_class">{{userInfo.inputRegion || '请选择户籍所在地'}}</view>
				</picker> -->
				<view class="picker_class" @click="showSource">{{userInfo.inputRegion || '请选择户籍所在地'}}</view>
			</view>
			<view class="hint_text">按户口本填，如果乡镇列表中没有您所需的，请选择“其他”，联系当地兵役机关完成乡镇信息</view>
			<view class="group_item">
				<view class="group_title">
					<span style="color: red;">*</span>家庭住址
				</view>
				<textarea maxlength="100" v-model="userInfo.inputAddress" type="text" placeholder="请输入具体家庭住址" class="picker_content_class" />
				</view>
			<view class="hint_text">请具体到门牌号，例如明湖小区1-1-101，或明湖村1号</view>
			<!-- 		<view class="group_item">
			<view class="group_title" style="width: 136upx;">
				<span style="color: red;">*</span>籍贯
			</view>
			<picker mode="region" :value="userInfo.inputHometown" @change="bindHometownChange">
				<view class="picker_class">{{userInfo.inputHometown}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title" style="width: 136upx;">
				<span style="color: red;">*</span>身高
			</view>
			<input type="digit" v-model="userInfo.inputHeight" placeholder="请输入身高" class="picker_class"
				style="width: 180upx;" />
			<view style="line-height: 100upx;">厘米</view>
		</view>
		<view class="group_item">
			<view class="group_title" style="width: 136upx;">
				<span style="color: red;">*</span>体重
			</view>
			<input type="digit" v-model="userInfo.inputWeight" placeholder="请输入体重" class="picker_class"
				style="width: 180upx;" />
			<view style="line-height: 100upx;">公斤</view>
		</view>
		<view class="hint_text">注意单位是公斤</view>
		<view class="group_item">
			<view class="group_title" style="width: 234upx;">
				<span style="color: red;">*</span>左裸眼视力
			</view>
			<input type="digit" v-model="userInfo.inputLeft" placeholder="请输入4.0-5.3之间的数值" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title" style="width: 234upx;">
				<span style="color: red;">*</span>右裸眼视力
			</view>
			<input type="digit" v-model="userInfo.inputRight" placeholder="请输入4.0-5.3之间的数值" class="picker_class" />
		</view> -->
			<!-- 防止按钮遮挡的空view -->
			<!-- <view style="height: 120upx;width: 100%;background: #FBFBFB;"></view> -->
			<button type="primary" class="button_class" @click="nextStep">下一步</button>
			<!-- <button type="primary" class="button_class" @click="addUserInfo">保存</button> -->
		</view>
		<ApplyMilitary v-show="step == 1"></ApplyMilitary>
		<wPicker mode="region" @confirm="confirm" ref="region" themeColor="#f00" :defaultVal="defaultValue"
		 :hideArea="false"></wPicker>
	</view>
</template>

<script>
	import ApplyMilitary from './applyMilitary.vue'
	import wPicker from "@/components/w-picker/w-picker.vue";
	
	export default {
		data() {
			return {
				step:0,
				list: [{
					title: '基本信息',
				}, {
					title: '附加信息'
				}],
				defaultValue: ["四川省", "成都市", "武侯区"],
				userInfo: {
					inputName: "",
					inputSex: '1',
					inputPhone: "",
					inputIdCard: "",
					inputBirthday: "",
					inputSchName: "",
					inputMajor:"",
					inputEducation: "",
					inputPolitic: "",
					// inputReligion: "",
					inputRegion: "",
					inputAddress: "",
					// inputHometown: "请选择籍贯",
					// inputHeight: "",
					// inputWeight: "",
					// inputLeft: "",
					// inputRight: "",
				},

				nationList: [
					"汉族", "壮族", "满族", "回族", "苗族", "维吾尔族", "土家族", "彝族", "蒙古族",
					"藏族", "布依族", "侗族", "瑶族", "朝鲜族", "白族", "哈尼族", "哈萨克族", "黎族",
					"傣族", "畲族", "傈僳族", "仡佬族", "东乡族", "高山族", "拉祜族", "水族", "佤族",
					"纳西族", "羌族", "土族", "仫佬族", "锡伯族", "柯尔克孜族", "达斡尔族", "景颇族",
					"毛南族", "撒拉族", "布朗族", "塔吉克族", "阿昌族", "普米族", "鄂温克族", "怒族",
					"京族", "基诺族", "德昂族", "保安族", "俄罗斯族", "裕固族", "乌孜别克族", "门巴族",
					"鄂伦春族", "独龙族", "塔塔尔族", "赫哲族", "珞巴族"
				],
				politicList: [
					"中共党员", "中共预备党员", "共青团员", "群众"
				],
				eduList: [
					"研究生", "一本", "二本", "三本", "专科", "高校新生", "普通高中", "初中", "其他"
				],
				activityId:"",
				communityId:this.$api.util.getAreaCode()
			}
		},
		components: {
			ApplyMilitary,
			wPicker
		},
		onLoad(option) {
			// 查询活动，查询最新的一条活动的活动id（两个入口）
			this.getData()
		},
		methods: {
			getData() {
				let params = {
					"areaCode": this.communityId,
					"pageSize": 1,
					"page": 1,
					"activityType": "2",    //参军活动
					"fromPhone": "1"
				}
				this.$api.request.queryActivities(params, (res) => {
					if (res.body.status.statusCode === '0') {
						let activities = res.body.data.lists;
						if(activities.length > 0){
							let announceInfo = activities[0].activity
							this.activityId = announceInfo.activityUuid;
						}
					} else {
						this.$api.msg("系统出错了")
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			nextStep() {
				if (this.userInfo.inputName == "") {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none',
						duration: 2000
					});
					return
				}

				if (!this.$api.util.validateMobileNo(this.userInfo.inputPhone)) {
					this.$api.msg('请输入正确的手机号码');
					return
				}
				var idcard_patter =
					/^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
				if (!idcard_patter.test(this.userInfo.inputIdCard)) {
					this.$api.msg('请输入正确的身份证号码');
					return;
				}
				if (this.userInfo.inputBirthday === "") {
					uni.showToast({
						title: '请选择出生日期',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.userInfo.inputPolitic === "") {
					uni.showToast({
						title: '请选择政治面貌',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.userInfo.inputEducation === "") {
					uni.showToast({
						title: '请选择文化程度',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.userInfo.inputSchName === "") {
					uni.showToast({
						title: '请填写毕业院校',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.userInfo.inputRegion === "") {
					uni.showToast({
						title: '请选择户籍所在地',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.userInfo.inputAddress === "") {
					uni.showToast({
						title: '请填写家庭地址',
						icon: 'none',
						duration: 2000
					});
					return
				}
				this.step = 1
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 200
				});
			},
			foreStep() {
				this.step = 0
			},
			showSource() {
				this.$refs['region'].show();
			},
			addUserInfo() {
				uni.navigateBack()
			},
			// bindMarriageChange(e) {
			// 	this.userInfo.inputMarriage = this.marriageList[e.detail.value]
			// },
			handleSexChange(e) {
				console.log(e)
				this.userInfo.inputSex = e.detail.value
			},
			bindBirthdayChange(e) {
				this.userInfo.inputBirthday = e.detail.value
			},
			bindEducationChange(e) {
				this.userInfo.inputEducation = this.eduList[e.detail.value]
			},
			// bindNationChange(e) {
			// 	this.userInfo.inputNation = this.nationList[e.detail.value]
			// },
			bindPoliticChange(e) {
				console.log(e)
				this.userInfo.inputPolitic = this.politicList[e.detail.value]
			},
			bindRegionChange(e) {
				this.userInfo.inputRegion = e.detail.value
			},
			confirm(e) {
				this.userInfo.inputRegion = e.result
			},
			// bindHometownChange(e) {
			// 	this.userInfo.inputHometown = e.detail.value
			// },

		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		background-color: #FBFBFB;
		overflow: hidden;
	}

	.example-body {
		position: fixed;
		width: 100%;
		padding: 16upx 0 16upx 0;
		font-size: 30upx;
		background-color: #fbfbfb;
		z-index: 99;
		box-shadow: 2upx 2upx 20upx rgba(0, 0, 0, 0.1);
	}

	.common_info {
		color: #fff;
		font-weight: bold;
		background: #8AB46C;
		width: 160upx;
		/* height: 50upx; */
		text-align: center;
		line-height: 60upx;
		font-size: 30upx;
		/* letter-spacing: 4upx; */
		border-radius: 0 30upx 30upx 0;
		box-shadow: 2upx 2upx 20upx rgba(0, 0, 0, 0.1);
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.group_item1 {
		width: 100%;
		padding: 10upx 30upx;
		margin: 10upx 0;
		background-color: white;
		overflow: hidden;
	}

	.group_title1 {
		width: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.group_title {
		width: 180upx;
		padding-top: 30upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.picker_content_class {
		width: 100%;
		height: 160upx;
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	input {
		padding-left: 10upx;
	}

	.button_class {
		/* position: fixed; */
		/* bottom: 40upx; */
		margin-top: 20upx;
		margin-left: 10%;
		margin-bottom: 40upx;
		width: 80%;

		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #8AB46C !important;
		color: white
	}

	.hint_text {
		color: #999;
		padding: 0 30upx;
		font-size: 24upx;
	}
</style>
